import list from './js/data';
import './css/index.css';
// let footer = document.querySelector('.footer');
let ul = document.querySelector('ul');
let loading = document.querySelector('.loading');
let num = 7;
function reader() {
  ul.innerHTML = '';
  for (let i = 0; i <= num; i++) {
    ul.innerHTML += `<li>
          <img
            src="${list[i].pic}"
            alt=""
          />
          <p>${list[i].name}</p>
          <p>城市: ${list[i].city}</p>
          <p>地址: ${list[i].address}</p>
          <p>价格: ${list[i].price}</p>
          <p>演出时间: ${list[i].showTime}</p>
        </li>
        `;
  }
}
reader();

document.addEventListener('scroll', () => {
  if (
    document.documentElement.scrollTop +
      document.documentElement.clientHeight >=
    document.documentElement.scrollHeight
  ) {
    if (num > list.length - 4) {
      return;
    }
    loading.classList.add('active');
    setTimeout(() => {
      loading.classList.remove('active');
      num += 4;
      reader();
    }, 500);
  }
});
